<?php
$baseUrl = $this->baseUrl();
?>
<form id="dataform" class="uniForm" action="javascript:submit();"
	style="padding: 0.5em 1em 1em 1.5em;">
<h2>Project Submission</h2>
<hr />

<div class="ctrlHolder"><label for="name"><em>*</em>Builder Name</label>
<input name="name" id="name" data-default-value="e.g. Ansal Group"
	size="35" maxlength="50" type="text"
	class="textInput required" />
<p class="formHint">Name of BUILDER</p>
</div>

<div class="ctrlHolder"><label for="project_name"><em>*</em>Project Name</label>
<input name="project_name" id="project_name"
	data-default-value="e.g. Ansal CHD" size="35" maxlength="50"
	type="text" class="textInput required" />
<p class="formHint">Name of Project</p>
</div>

<div class="ctrlHolder"><label for="contact"><em>*</em>Contact Number</label>
<input name="contact" id="contact" data-default-value="e.g. 9896102030"
	size="35" maxlength="12" type="text"
	class="textInput required validateInteger" />
<p class="formHint">Contact Number of <span class="cName">Owner</span></p>
</div>

<div class="ctrlHolder"><label for="state"><em>*</em>State</label> 
	<select id="state" name="state" class="selectInput">
          		<option value="-1">Please Select</option>
				<optgroup label="Union Territory"></optgroup>
				<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
				<option value="Chandigarh">Chandigarh</option>
				<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
				<option value="Daman and Diu">Daman and Diu</option>
				<option value="Lakshadweep">Lakshadweep</option>
				<option value="Pondicherry">Pondicherry</option>
				<option value="New Delhi">New Delhi</option>
				
				<optgroup label="States"></optgroup>
				<option value="Andhra Pradesh">Andhra Pradesh</option>
				<option value="Arunachal Pradesh">Arunachal Pradesh</option>
				<option value="Assam">Assam</option>
				<option value="Bihar">Bihar</option>
				<option value="Chhattisgarh">Chhattisgarh</option>
				<option value="Goa">Goa</option>
				<option value="Gujarat">Gujarat</option>
				<option value="Haryana">Haryana</option>
				<option value="Himachal Pradesh">Himachal Pradesh</option>
				<option value="Jammu/Kashmir">Jammu and Kashmir</option>
				<option value="Jharkhand">Jharkhand</option>
				<option value="Karnataka">Karnataka</option>
				<option value="Kerala">Kerala</option>
				<option value="Madhya Pradesh">Madhya Pradesh</option>
				<option value="Maharashtra">Maharashtra</option>
				<option value="Manipur">Manipur</option>
				<option value="Meghalaya">Meghalaya</option>
				<option value="Mizoram">Mizoram</option>
				<option value="Nagaland">Nagaland</option>
				<option value="Orissa">Orissa</option>
				<option value="Punjab">Punjab</option>
				<option value="Rajasthan">Rajasthan</option>
				<option value="Sikkim">Sikkim</option>
				<option value="Tamil Nadu">Tamil Nadu</option>
				<option value="Tripura">Tripura</option>
				<option value="Uttaranchal">Uttaranchal</option>
				<option value="Uttar Pradesh">Uttar Pradesh</option>
				<option value="West Bengal">West Bengal</option>
		          	
          </select>
	
<p class="formHint">State of <span class="cName">Project</span></p>
</div>

<div class="ctrlHolder"><label for="district"><em>*</em>District</label>
<input name="district" id="district" data-default-value="e.g. Ambala"
	size="35" maxlength="50" type="text" class="textInput required" />
<p class="formHint">District of <span class="cName">Project</span>(if applicable)</p>
</div>

<div class="ctrlHolder"><label for="city"><em>*</em>City/Town/Village</label>
<input name="city" id="city" data-default-value="e.g. Ambala City"
	size="35" maxlength="50" type="text" class="textInput required" />
<p class="formHint">City of <span class="cName">Project</span></p>
</div>

<div class="ctrlHolder"><label for="location"><em>*</em>Location</label>
<input name="location" id="location"
	data-default-value="e.g. 365, Model Town" size="35" maxlength="50"
	type="text" class="textInput required" />
<p class="formHint">Location of <span class="cName">Project</span></p>
</div>

<div class="ctrlHolder"><label for="total_area"><em>*</em>Total Area</label>
<input name="total_area" id="total_area" data-default-value="e.g. 30"
	size="35" maxlength="50" type="text"
	class="textInput validateNumber required" />
<p class="formHint">Total area of <span class="cName">Project</span> in
which it is spread.</p>
</div>
<div class="ctrlHolder"><label for="area_unit">Area Unit</label> <select
	name="area_unit" id="area_unit" class="selectInput">
	<option value="sqft">sq.ft.</option>
	<option value="sqmeter">sq. meter</option>
	<option value="sqyard">sq.yard</option>
	<option value="acre" selected="selected">acre</option>
	<option value="hectare">hectare</option>
	<option value="marla">marla</option>
</select>
<p class="formHint">Unit to specify area.</p>
</div>
<div class="ctrlHolder"><label for="summary"><em>*</em>Summary</label> <textarea
	name="summary" id="summary"
	data-default-value="e.g. An esteemed brand is going to launch mid range flats in the city."
	rows="25" cols="25"></textarea>
<p class="formHint">Summary of <span class="cName">Project</span></p>
</div>



<div id="specDiv" class="ctrlHolder">
<p class="label"><em>*</em> Project Specifications</p>
<ul class="alternate">
	<li><label>Category<select name="category_id" class="selectInput specDiv">
		<option value="-1">Select one</option>
		<option value="RES" >Residential</option>
		<option value="COM">Commercial</option>
		<option value="IND">Industrial</option>
	</select></label></li>
	
	<li><label>Type<select name="type_id" class="selectInput specDiv">
	<option value="-1">Select One</option></select></label></li>
	
	<!-- <li><label>Available For <select name="status" class="selectInput">
		<option value="SALE">Sale</option>
		<option value="RESALE">Resale</option>
		<option value="RENT">Rent</option>
	</select></label></li>
	-->
	<li><label><em>*</em>Size<input name="size" data-default-value="e.g. 12" size="5"
	maxlength="10" type="text" class="textInput validateNumber required specDiv" /></label></li>
	
<li><label>Area Unit<select
	name="area_unit" class="selectInput specDiv">
	<option value="sqft">sq.ft.</option>
	<option value="sqmeter">sq. meter</option>
	<option value="sqyard">sq.yard</option>
	<option value="acre">acre</option>
	<option value="hectare">hectare</option>
	<option value="marla">marla</option>
</select></label></li>

<li><label><em>*</em>Price<input name="price" data-default-value="e.g. 3000000" size="10"
	maxlength="10" type="text" class="textInput validateNumber required specDiv" /></label></li>
	
	<li><label><em>*</em>Rate per unit<input name="rate_per_unit" data-default-value="e.g. 3000" size="10"
	maxlength="10" type="text" class="textInput validateNumber required specDiv" /></label></li>
	
	<li><label><em>*</em>BHK<input name="bhk" value="0" size="5"
	maxlength="5" type="text" class="textInput validateInteger required specDiv" /></label></li>
	
	<li><label>Remark<input name="remark" data-default-value="e.g. well furnished,high demand" size="35"
	maxlength="50" type="text" class="textInput specDiv" /></label></li>
</ul>
<a id="addMoreSpec" href="javascript:void(0);">Add</a>
<p class="formHint">Specification of project</p>
</div>
<div  id="brokerageDiv"  class="ctrlHolder">
<p class="label">Brokerages</p>
<ul class="alternate">
	<li><label><em>*</em>From<input name="from" value="1" size="5"
	maxlength="2" type="text" class="textInput validateInteger required specDiv" /></label></li>
	
	<li><label>Upto<input name="upto" data-default-value="e.g. 5" size="5"
	maxlength="2" type="text" class="textInput validateInteger specDiv" /></label></li>
	
	<li><label><em>*</em>Brokerage%<input name="brokerage" data-default-value="e.g. 3" size="5"
	maxlength="5" type="text" class="textInput validateNumber required specDiv" /></label></li>
	
</ul>
<a id="addMoreBrokerage" href="javascript:void(0);">Add</a>
<p class="formHint">Brokerage of project</p>
</div>
<br />
<div id="submitStatus" style="display: none;"
	class="ui-state-highlight ui-corner-all"></div>
	
<br />
<div class="buttonHolder">
<button type="submit" class="secondaryAction">Cancel and go back</button>
<button type="submit" class="primaryAction">Submit</button>
</div>
</form>

<script>
    var urlProjectRegister = "<?php echo $this->url(array('module' => 'employee','controller' => 'estate', 'action' => 'register'))?>";
    var estateTypes = {};
    estateTypes.RES = {FLAT:'Flat',VILLA:'Villa',PLOT:'Plot',BNGLO:'Banglow',KOTHI:'Kothi'};
    estateTypes.COM = {PLOT:'Plot',SHOP:'Shop',SROOM:'Showroom',CSPACE:'Commercial Space',CLAND:'Commercial Land'};
    estateTypes.IND = {ILAND:'Industrial Land',SITE:'Site'};
	
    $(function(){
        //var firstSpecSet = $(':input[name="category_id"]:first');
        $('form.uniForm').uniform({
            prevent_submit : true
    	});
    	
    	//updatePTypes(firstSpecSet);
    	
        $(':input[name="category_id"]').bind('change',function() {
            updatePTypes($(this));
        });

        $(':input[name="price"]').bind('change',function() {
        	var size = $(this).parent().parent().parent()
        			.find(':input[name="size"]').val();
			var totalPrice = $(this).val();
			var ratePerUnit = totalPrice/size;
            $(this).parent().parent().parent().find(':input[name="rate_per_unit"]').val(ratePerUnit).attr('disabled',true);
        });

        $(':input[name="rate_per_unit"]').bind('change',function() {
        	var size = $(this).parent().parent().parent()
        			.find(':input[name="size"]').val();
			var ratePerUnit = $(this).val();
			var totalPrice = ratePerUnit*size;
            $(this).parent().parent().parent().find(':input[name="price"]').val(totalPrice).attr('disabled',true);
        });
        
        $('#area_unit').change(function() {
            var aUnit = $('#area_unit :selected').text();
            $('.unitName').text(aUnit);
        });


        $('#addMoreSpec').click(function() {
            var last = $(this).prev();
            var clone = last.clone();
            clone.find(':input[name="rate_per_unit"],'+
                    	':input[name="price"],'+
                    	':input[name="size"],'+
                    	':input[name="bhk"],'+
                    	':input[name="remark"]').val('').attr('disabled','');
            clone.find(':input[name="bhk"]').val(0);
            last.after(clone);
        });
        $('#addMoreBrokerage').click(function() {
            var last = $(this).prev();
            var lastUpto = last.find(':input[name="upto"]').val();
            if (parseInt(lastUpto) == lastUpto) {
                var clone = last.clone();
                var nextFrom = parseInt(lastUpto)+1;
                clone.find(':input[name="from"]').val(nextFrom);
                clone.find(':input[name="upto"],:input[name="brokerage"]').val('');
                last.after(clone);
			} else {
				alert('You should first fill "upto" field.');
			}
        });
    });


      function updatePTypes(categoryElem) {
          pType = categoryElem.val().toUpperCase();
          switch (pType) {
    			case 'RES' :
    			case 'COM' :
    			case 'IND' :
        			var selectString = '';
        			$.each(estateTypes[pType], function (index, name) {
        				selectString += '<option value ="'+index+'">'+name+'</option>';
        			});
        			//prepareSelectOption(jDept, selectString);
        			selectString += '</select>';
        			
        			categoryElem.parent().parent().parent().find(':input[name="type_id"]').html(selectString);
  				break;
			default :
                console.log('pType :"'+pType+'" is not in cases.');
				break;
		}
      }
		
      function submit() {
            $.ajax({
                url : urlProjectRegister,
                data : getValues(),
                success: function(jStatus){
                    $( "#submitStatus" ).text(jStatus).show( 'blind', '', 'slow', function(){
                        scroll(this);
                        alert('Server Message: '+jStatus);
                      	setTimeout(function(){
                          	window.location.reload();
                          	},2000);
                      } );
                  },
                    error: function(response) {
                  	  $('#errorBox').text(response.responseText).parent().show();
                        console.log(response);
                        }
                    });
            }

      
        function getValues() {
            var formData = {oper:'add'}; 
            $('#dataform :input')
            .not('button,:input[value^="e.g."],.specDiv')
            		.each(function(){
            			formData[this.name] = this.value; 
                });
            /**
            Specifications Set
            */
            var specValues =new Array();
            $('#specDiv > ul').each(function(index,specSet) {
                var temp = new Array();
            	$(specSet).find(':input').each(function(index,spec) {
                	var inputVal = $(spec).val();
                	if (("e.g." != inputVal.substr(0,4)) & (inputVal.length > 0) ) {
                		temp.push(this.name+':'+inputVal);
					}
            		
				});
            	;
            	specValues.push(temp.join(";"));
			});
            formData.specValues = specValues; 


            /*
            Brokerage Set
            */
            var brokerageValues =new Array();
            $('#brokerageDiv > ul').each(function(index,brokeSet) {
                var temp = new Array();
            	$(brokeSet).find(':input').each(function(index,broke) {
                	var inputVal = $(broke).val();
                	if ("e.g." != inputVal.substr(0,4)) {
                		temp.push(this.name+':'+inputVal);
					}
				});
            	;
            	brokerageValues.push(temp.join(";"));
			});
            formData.brokerageValues = brokerageValues;


            
  			return formData;
  		}
        function scroll(destination){
        	var pos = $(destination).offset().top;
        	pos -= 100;
        	$('html, body').animate({
        	scrollTop: pos
        	}, 'slow');
        }
        </script>
<?php
$this->headScript()->appendFile(
$baseUrl . '/plugins/uni-form/js/uni-form-validation.jquery.js');
$this->headLink()->prependStylesheet(
$baseUrl . '/plugins/uni-form/css/uni-form.css');
$this->headLink()->prependStylesheet(
$baseUrl . '/plugins/uni-form/css/smooth.uni-form.css');
$this->headLink()->prependStylesheet(
$baseUrl . '/plugins/uni-form/demos/css/demo.css');
?>